<template>
	<view>
		<view class="m-swiper">
			<swiper :autoplay="false" :interval="3000" :duration="1000" :previous-margin="30" :next-margin="30"
				@change="swiperChangeFun" :current="current">
				<swiper-item v-for="(item,index) in levelList" :key="index">
					<view class="swiper-item">
						<view class="swiper-view"
							:style="{background:'url('+item.originalPic+ ')',backgroundSize:'100% 100%'}">
							<view class="swiper-top">
								<view class="swiper-top-left" :class="{'swiper-max':item.isMax && item.nextName}">
									<text v-if="item.get_time">{{get_date('YYYY.MM.DD',item.get_time)}}获得</text>
									<text v-else-if="item.id == user_info.level_id">--</text>
									<text v-else-if="!item.nextName">购买礼包升级</text>
									<text v-else>未获得</text>
								</view>
								<view class="swiper-top-right" v-if="item.id == user_info.level_id">
									<text>当前等级</text>
								</view>
							</view>
							<view class="swiper-name" :class="{'swiper-max':item.isMax && item.nextName}">
								<text>{{item.title}}</text>
							</view>
							<view class="swiper-pre">
								<view class="swiper-pre-box">

								</view>
							</view>
							<view class="swiper-text" v-if="!item.isMax">
								<text v-if="item.failureTime">{{get_date('YYYY.MM.DD',item.failureTime)}}前</text>
								<text v-else>自购买日起365天内</text>
								<text>入住{{ Number(item.nextInfo.night_num) }}个间夜或消费满{{Number(item.nextInfo.cost_price) || 0}}元即升级{{item.nextName}},</text>
								<text style="color: #DE2C38;" @click="to_link('/pages2/hotel-member-upgrade/hotel-member-upgrade')">也可购买礼包升级</text>
							</view>
							<view class="swiper-text" v-else>
								<block v-if="item.nextName">
									<text style="color: #E4C79B;">{{get_date('YYYY.MM.DD',item.failureTime)}}前 入住{{item.keep_night_num}}个间夜即可实现保级</text>
									<text style="color: #D3A358;" @click="to_link('/pages2/hotel-member-upgrade/hotel-member-upgrade')">也可购买礼包升级</text>
								</block>
								<block v-else>
									<!-- <text>{{get_date('YYYY.MM.DD',item.failureTime)}}前 入住{{item.keep_night_num}}个间夜即可实现保级</text> -->
									<!-- <text v-if="item.id == user_info.level_id">{{get_date('YYYY.MM.DD',item.failureTime)}}到期</text>-->
									<text style="color: #DE2C38;">订房享8.5折</text> 
								</block>
							</view>

						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="swiper-dot">
			<view class="swiper-dot-item" :class="{'swiper-dot-active':current == index}"
				v-for="(item,index) in levelList" :key="index"></view>
		</view>

		<view class="m-title">
			<image src="../static/hotel/ico_member rights.png" mode=""></image>
			<text>会员权益</text>
		</view>
		<view class="m-list">
			<!-- <view class="m-item">
				<image src="../static/hotel/hotel-menu1.png" mode=""></image>
				<view class="m-item-font1">
					<text>专享9.8折</text>
				</view>
				<view class="m-item-font2">
					<text>酒店预订折扣</text>
				</view>
			</view>
			<view class="m-item">
				<image src="../static/hotel/hotel-menu2.png" mode=""></image>
				<view class="m-item-font1">
					<text>延迟1~2小时</text>
				</view>
				<view class="m-item-font2">
					<text>延迟入住</text>
				</view>
			</view>
			<view class="m-item">
				<image src="../static/hotel/hotel-menu3.png" mode=""></image>
				<view class="m-item-font1">
					<text>精美礼品</text>
				</view>
				<view class="m-item-font2">
					<text>酒店前台领取</text>
				</view>
			</view> -->
			<u-parse :html="content" @imgtap="()=>{}" :disPreview="true"></u-parse>
		</view>

		<view class="m-cell" @click="to_link('/pages3/content/content?id=84')">
			<view class="m-cell-left">
				<text>会员手册</text>
			</view>
			<view class="m-cell-right">
				<text>查看</text>
				<image src="../static/shop/icon-right.png" mode=""></image>
			</view>
		</view>
		<view class="m-bottom-empty"></view>
		<view class="m-bottom">
			<view class="m-bottom-btn" :class="{'m-bottom-btn__one':!(current > 0 &&getInfoComputed )}" @click="to_link('/pages2/hotel-member-record/hotel-member-record')">
				<text>会员购买记录</text>
			</view>
			<view class="m-bottom-btn m-bottom-btn__extend" @click="submitPayFun" v-if="current > 0 &&getInfoComputed ">
				<text class="m-bottom-btn__font1">{{Number(getInfoComputed.price)}}</text>
				<text class="m-bottom-btn__font2">立即升级</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		get_userInfo
	} from "@/common/function/api_fun.js"
	import {
		get_date,
		get_timestamp
	} from "@/common/function/tools.js"
	export default {
		data() {
			return {
				user_info: {},
				levelList: [],
				current: 0,
				content: '',
				levelBack: [],
			}
		},
		computed:{
			getInfoComputed(){
				return this.levelList[this.current]
			}
		},
		onLoad() {

		},
		onShow() {

			this.getIndexFun()
		},
		methods: {
			get_date,
			submitPayFun(){
				if(!this.getInfoComputed){
					this.$m.msg('请选择会员等级')
					return false
				}
				let item = this.getInfoComputed
				this.$http.getJson('money_buyVip',{id:item.id}).then(res=>{
					if(res.code == 1){
						this.$http.wx_pay(res.data).then(e => {
							if (e.errMsg == 'requestPayment:fail cancel' || e.errMsg ==
								'requestPayment:fail') {
								this.$m.msg('支付失败')
							} else {
								this.getIndexFun()
								this.$m.msg('升级成功')
							}
						})
						
					}else{
						this.$m.msg(res.message)
					}
				})
			},
			getIndexFun() {
				get_userInfo((data) => {
					this.user_info = data
					let levelList = []
					let len = data.level_rules.length - 2
					data.level_rules.forEach((item,index)=>{
						if(item.id >= data.level_id){
							let val = data.level_rules[index+1]
							
							levelList.push({
								...item,
								isMax:index >= len ? true:false,
								nextName:val ? val.title : '',
								nextInfo:val || null
							})
						}
					})
					this.current = levelList.length -1
					this.levelList = levelList
					this.content = levelList[this.current].content || ''
				})
				// this.$http.getJson('index_index').then(res=>{
				// 	if(res.code == 1){
				// 		this.levelBack = []
				// 		res.data.adverts.forEach(item=>{
				// 			if(item.title == '会员等级背景图'){
				// 				this.levelBack = item.images
				// 			}
				// 		})
				// 		get_userInfo((data)=>{
				// 			this.user_info = data
				// 			let levelList = []
				// 			data.level_rules.forEach(item=>{
				// 				if(item.id >= data.level_id){
				// 					let val = this.levelBack.find(val=>val.title == item.title)
				// 					levelList.push({
				// 						...item,
				// 						background:val ? val.image : ''
				// 					})
				// 				}
				// 			})

				// 			this.levelList = levelList
				// 			this.content = levelList[0].content || ''
				// 		})
				// 	}
				// })
			},
			swiperChangeFun(e) {
				this.current = e.detail.current
				this.content = this.levelList[this.current].content || ''
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}

	.m-swiper {
		width: 750rpx;
		height: 320rpx;
		margin-top: 80rpx;

		swiper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;

			.swiper-view {
				width: 600rpx;
				height: 100%;

				// background-image: url("../static/hotel/hotel-member-bg1.png");
				// background-size: 100% 100%;
				.swiper-top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-left: 48rpx;
					padding-top: 30rpx;

					.swiper-top-left {
						font-size: 24rpx;
						color: #75706A;
					}

					.swiper-top-right {
						width: 128rpx;
						height: 36rpx;
						line-height: 36rpx;
						background: #FFFFFF;
						border-radius: 18rpx 0rpx 0rpx 18rpx;
						font-size: 24rpx;
						color: #75706A;
						text-align: center;
					}
				}

				.swiper-name {
					font-size: 40rpx;
					color: #34302D;
					font-weight: 600;
					padding: 66rpx 0 0 48rpx;
					line-height: 56rpx;
				}

				.swiper-pre {
					width: 504rpx;
					height: 2rpx;
					background: rgba(#000000, 0.2);
					border-radius: 3rpx 3rpx 3rpx 3rpx;
					margin-left: 48rpx;
					margin-top: 10rpx;

					.swiper-pre-box {
						width: 0;
						height: 100%;
						background: rgba(#000000, 1);
						border-radius: 3rpx 3rpx 3rpx 3rpx;
					}
				}

				.swiper-text {
					font-size: 24prx;
					color: #75706A;
					margin-top: 18rpx;
					padding: 0 48rpx;
					line-height: 38rpx;
				}
				.swiper-h3{
					font-size: 24prx;
					color: #000;
					margin-top: 18rpx;
					margin-left: 48rpx;
				}
				.swiper-max{
					color: #E4C79B!important;
				}
			}
		}
	}

	.swiper-dot {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 60rpx;

		.swiper-dot-item {
			width: 10rpx;
			height: 10rpx;
			background: #E6E3DE;
			border-radius: 50%;
			margin: 0 5rpx;
		}

		.swiper-dot-active {
			width: 30rpx;
			height: 10rpx;
			background: #D3A358;
			border-radius: 5rpx;
			transition: all 0.1s;
		}

	}

	.m-title {
		display: flex;
		align-items: center;
		padding: 80rpx 30rpx 30rpx;
		font-size: 30rpx;
		color: #34302D;
		font-weight: 600;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}

	.m-list {
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;

		.m-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 216rpx;
			height: 242rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.m-item-font1 {
				font-size: 30rpx;
				color: #34302D;
				text-align: center;
				margin-top: 30rpx;
			}

			.m-item-font2 {
				font-size: 24rpx;
				color: #7D7D7D;
				margin-top: 8rpx;
				text-align: center;
			}

			image {
				width: 70rpx;
				height: 70rpx;
			}
		}
	}

	.m-cell {
		position: fixed;
		z-index: 1;
		bottom: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 690rpx;
		height: 104rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 0 24rpx;
		margin-left: 30rpx;
		margin-top: 60rpx;

		.m-cell-left {
			font-size: 30rpx;
			color: #34302D;
			font-weight: 800;
		}

		.m-cell-right {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #7D7D7D;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

	.m-bottom-empty {
		width: 100%;
		height: 260rpx;
	}

	.m-bottom {
		position: fixed;
		bottom: 30rpx;
		z-index: 3;
		width: 750rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.m-bottom-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 329rpx;
			height: 104rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 1rpx solid #E6E2DE;
			font-size: 32rpx;
			color: #9B958F;
		}
		
		.m-bottom-btn__one{
			width: 690rpx;
		}

		.m-bottom-btn__extend {
			background: #D3A358;
			border-color: #D3A358;
			color: #fff;
			margin-left: 20rpx;
			.m-bottom-btn__font1{
				font-size: 40rpx;
				color: #fff;
				&::before{
					content: '￥';
					font-size: 24rpx;
				}
			}
			.m-bottom-btn__font2{
				font-size: 32rpx;
				color: #fff;
				margin-left: 20rpx;
			}
		}
	}
</style>